<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>添加商品</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片视图 -->
		<el-card>

			<!-- 提示区域 -->
			<el-alert title="添加商品信息" type="info" center show-icon :closable="false">
			</el-alert>

			<!-- 步骤条 -->
			<!-- 这里的active需要转换成字符串数字 -->
			<el-steps :space="200" :active="+activeIndex" finish-status="success" :align-center="true">
				<el-step title="基本信息"></el-step>
				<el-step title="商品参数"></el-step>
				<el-step title="商品属性"></el-step>
				<el-step title="商品图片"></el-step>
				<el-step title="商品内容"></el-step>
				<el-step title="完成"></el-step>
			</el-steps>

			<!-- tab栏,el-tab里面只能嵌套el-tab-pane	-->
			<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" label-position="top">
				<el-tabs :tab-position="'left'" v-model="activeIndex" :before-leave="beforeTab" @tab-click="tabClick">
					<el-tab-pane label="基本信息" name="0">
						<el-form-item label="商品名称" prop="goods_name">
							<el-input v-model="addForm.goods_name"></el-input>
						</el-form-item>
						<el-form-item label="商品价格" prop="goods_price">
							<!-- 规定只可以输入数字 -->
							<el-input v-model="addForm.goods_price" type="number"></el-input>
						</el-form-item>
						<el-form-item label="商品重量" prop="goods_weight">
							<el-input v-model="addForm.goods_weight"></el-input>
						</el-form-item>
						<el-form-item label="商品数量" prop="goods_number">
							<el-input v-model="addForm.goods_number" type="number"></el-input>
						</el-form-item>
						<el-form-item label="商品分类" prop="goods_cat"> 
						<!-- options是数据源 -->
							  <el-cascader
							    v-model="addForm.goods_cat"
							    :options="cateList"
							    :props="{ expandTrigger: 'hover', 
									label: 'cat_name', value: 'cat_id', 
									children: 'children'}"
							    @change="handleChange"></el-cascader>
						</el-form-item>
					</el-tab-pane>	
					<el-tab-pane label="商品参数" name="1">
						<!-- 表单item项 -->
						<el-form-item :label="item.attr_name" v-for="item in manyData" :key="item.attr_id">
							  <el-checkbox-group v-model="item.attr_vals">
							    <el-checkbox :label="cb" v-for="(cb , i) in item.attr_vals" :key="i" border></el-checkbox>
   				      </el-checkbox-group>
						</el-form-item>
					</el-tab-pane>
					<el-tab-pane label="商品属性" name="2">
						<el-form-item :label="item.attr_name" v-for="item in onlyData" :key="item.attr_id">
							<el-input v-model="item.attr_vals"></el-input>
						</el-form-item>
					</el-tab-pane>
					<el-tab-pane label="商品图片" name="3">
						<!-- action：图片上传的API接口  on-preview指定预览事件触发   handleRemove点击X好触发   list-type决定UI效果	-->
						<!-- 需要手动设置heades请求头token字段 -->
						<el-upload
						  class="upload-demo"
						  :action="uploadUrl"
						  :on-preview="handlePreview"
						  :on-remove="handleRemove"
						  list-type="picture"
							:headers="headersObj"
							:on-success="handleSuccess">
						  <el-button size="small" type="primary">点击上传</el-button>
						  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
						</el-upload>
					</el-tab-pane>
					<el-tab-pane label="商品内容" name="4">
						<quill-editor v-model="addForm.goods_introduce"></quill-editor>
						<el-button type="primary" class="addBtn" @click="add">添加商品</el-button>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</el-card>
		
		<!-- 图片预览 -->
		<el-dialog
		  title="图片预览"
		  :visible.sync="previewVisible"
		  width="50%">
		  <img :src="previewPath" alt="" class="prevImgs">
		</el-dialog>
	</div>
</template>

<script>
	import _ from 'lodash'
	export default {
		data() {
			return {
				activeIndex: '0',
				// 添加商品表单数据对象
				addForm: {
					goods_name: '',
					// 价格
					goods_price:0,
					// 重量
					goods_weight: 0,
				  // 数量
					goods_number: 0,
					// 分类所属的数组
					goods_cat:[],
					// 图片数组
					pics:[],
					//商品详情描述
					goods_introduce: '',
					attrs: []
				},
				// 校验规则
				addFormRules: {
					goods_name: [{
						required: true,
						message: '请输入商品名称',
						trigger: 'blur'
					}],
					goods_price: [{
						required: true,
						message: '请输入商品价格',
						trigger: 'blur'
					}],
					goods_weight: [{
						required: true,
						message: '请输入商品重量',
						trigger: 'blur'
					}],
					goods_number: [{
						required: true,
						message: '请输入商品数量',
						trigger: 'blur'
					}],
					goods_cat: [{
						required: true,
						message: '请选择商品分类',
						trigger: 'blur'
					}],
				},
				// 商品分类列表数据
				cateList: [],
				// 动态参数列表
				manyData: [],
				// 静态参数列表
				onlyData: [],
				// 上传图片的地址
				uploadUrl: 'https://www.fastmock.site/mock/4558d22ceba07a4e52f027187b2f5935/lujing/upload',
				// 上传图片headers字头
				headersObj: {
					Authorization:
					window.sessionStorage.getItem('token')
				},
				previewPath: '',
				
				// 图片预览对话框显示与隐藏
				previewVisible: false
				// cateprops: {
				// 	label: 'cat_name',
				// 	value: 'cat_id',
				// 	children: 'children'
				// }
			}
		},
		created() {
			this.getCateList()
		},
		methods: {
			async getCateList() {
				const { data : res } = await this.$http.get('/categories520')
				if(res.meta.status !== 200) {
					return this.$message.error('获取商品分类列表失败')
				}
				this.cateList = res.data
				console.log(this.cateList)
			},
			// 选择器变化触发
			handleChange() {
				console.log(this.addForm.goods_cat)
					// 只可以选择三级分类
				// if(this.addForm.goods_cat !== 2) {
				// 	this.addForm.goods_cat = []
				// }
			},
			beforeTab(activeName,oldActiveName) {
				// console.log('离开' + oldActiveName)
				// console.log('进入' + activeName)
				// return false
				// if(oldActiveName === '0' && this.addForm.goods_cat.length !== 3 || this.addForm.goods_name === '')
				if(oldActiveName === '0' && this.addForm.goods_cat.length !== 3) {
					this.$message.error('请添加商品名称，请选择商品分类')
					return false
			  }
      },
			// 切换TAB发送请求
			async tabClick() {
				// console.log(this.activeIndex)
				// activeIndex = 1 访问动态参数
				if(this.activeIndex === '1') {
					const { data : res } = await this.$http.
					get(`/categories/${this.cateId}/attributes1`,{params: {sel: 'many'}})
					if (res.meta.status !== 200) {
						return this.$message.error('获取动态参数列表失败')
					}
					// 循环每项以空格分隔数组
					res.data.forEach(item => {
						// console.log(item)
						item.attr_vals = item.attr_vals.length === 0 ? [] : item.attr_vals.split(' ')
					})
					this.manyData = res.data
					console.log(this.manyData)
					// activeIndex = 2 访问静态参数
				} else if(this.activeIndex === '2') {
					const { data : res } = await this.$http.
					get(`/categories/${this.cateId}/attributes1`,{params: {sel: 'only'}})
					if (res.meta.status !== 200) {
						return this.$message.error('获取动态参数列表失败')
					}
					console.log(res.data)
					this.onlyData = res.data
				}
			},
			// 图片预览
			handlePreview(file) {
				console.log(file)
				this.previewPath = 
				file.url
				this.previewVisible = true
			},
			// 移除图片
			handleRemove(file) {
				// 1获取要删除的临时路径
				const removeFile = file.response.data.tmp_path
				//2从pics数组找都图片的索引值
				const i = this.addForm.pics.findIndex(x => {
						// console.log(x)
					x.pic === removeFile
					return
				})
				
				// 3调用数组splice方法，把图片信息从pics数组删除
				this.addForm.pics.splice(i, 1)
				console.log(this.addForm)
					// console.log(file)
			},
			// resposse服务器返回的数据
			handleSuccess(resposse) {
				console.log(resposse)
				const picInfo = { pic: resposse.data.tmp_path }
				this.addForm.pics.push(picInfo)
				console.log(this.addForm)
			},
			add() {
				
				this.$refs.addFormRef.validate(async valid => {
					if(!valid) {
						return this.$message.error('请填写表单项')
					}
					//添加按钮发起请求
					const form = _.cloneDeep(this.addForm)
					form.goods_cat = 
					form.goods_cat.join(',')
					
					// 处理动态参数
					this.manyData.forEach(item => {
						const newInfo = {attr_id: item.attr_id, attr_value: item.attr_vals.join(' ')}
						this.addForm.attrs.push(newInfo)
					})
					// 处理静态属性
					this.onlyData.forEach(item => {
						const newInfo = {attr_id: item.attr_id, attr_value: item.attr_vals}
						this.addForm.attrs.push(newInfo) 
					})
					form.attrs = this.addForm.attrs
					
					console.log(form)
					const { data : res } = await this.$http.post('/goods', form)
					if(res.meta.status !== 201) {
						return this.$message.error('添加商品失败')
					}
					this.$message.success('添加商品成功')
					this.$router.push('/user3')
			  })
			}
		},
		computed: {
			// 获取3级分类ID
			cateId() {
				if(this.addForm.goods_cat.length === 3) {
					return this.addForm.goods_cat[2]
				}
				return null
			}
		}
	}
</script>

<style lang="less" scoped>
.el-checkbox {
	margin: 0 10px 0 0 !important;
}
.prevImgs {
	width: 100%;
	
}
.addBtn {
	margin-top: 15px;
}
</style>
